<!DOCTYPE html>
<html xmlns:th="https://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>评论审核</title>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css"/>
    <link rel="stylesheet" type="text/css" href="/css/back-index.css"/>
    <script src="/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/bootstrap-paginator.js"></script>
    <script src="/js/bootstrap-mypaginator.js"></script>

    <script type="text/javascript">
        $(function () {
            // 分页
            $("#commentPageHelper").bootstrapPaginator({
                bootstrapMajorVersion: 3,   // bootstrap3之前不需要配置
                currentPage: "[[${commentPage.pageNum == 0 ? 1 : commentPage.pageNum}]]",
                totalPages: "[[${commentPage.pages == 0 ? 1 : commentPage.pages}]]",
                onPageClicked: function (event, originalEvent, type, page) {
                    $("#pageNo").val(page);
                    $("#searchForm").submit();
                }
            })
            // 启用与禁用
            $("input[name='modifyStatus']").click(function () {
                $.ajax({
                    type: "post",
                    url: "/comment/modifyStatus",
                    data: {
                        "id": $(this).attr("data-id"),
                        "status": $(this).attr("data-status")
                    },
                    dataType: "json",
                    success: function (result) {
                        if (result.responseCode == "2001") {
                            location.href = "/comment/findComment?pageNo=[[${commentPage.pageNum == 0 ? 1 : commentPage.pageNum}]]";
                        } else {
                            $("#errorMsg").html(result.message);
                        }
                    }
                })
            });
            // 显示隐藏查询列表
            $('#show-user-search').click(function () {
                $('#show-user-search').hide();
                $('#upp-user-search').show();
                $('.showusersearch').slideDown(500);
            });
            $('#upp-user-search').click(function () {
                $('#show-user-search').show();
                $('#upp-user-search').hide();
                $('.showusersearch').slideUp(500);
            });


            //按钮的超链接设置函数
            //      myoptions.pageUrl = function(type, page, current) {
            //          return "${pageContext.request.contextPath }/findAll.do?pageNo="
            //                  + page;
            //      };
            //分页回调函数,点击按钮事件
            myoptions.onPageClicked = function (event, originalEvent, type, page) {
                //ajax回调接收数据成功时再重新初始化分页按钮
                console.log("pageNo=", page);
//                 location.href= ".../pageNo=" + page;
            };

            //分页,在bootstrap-mypaginator.js中
            myPaginatorFun("myPages", 1, 9);
        });
    </script>
</head>

<body>
<div class="panel panel-default" id="userSet">
    <div class="panel-heading">
        <h3 class="panel-title">评论审核</h3>
    </div>
    <div>
        <input type="button" value="查询" class="btn btn-success" id="doSearch"
               onclick="document.getElementById('searchForm').submit()"
               style="margin: 5px 5px 5px 15px;"/>
        <input type="button" class="btn btn-primary" id="show-user-search" value="展开搜索"/>
        <input type="button" value="收起搜索" class="btn btn-primary" id="upp-user-search" style="display: none;"/>
    </div>

    <div class="panel-body">
        <div class="showusersearch" style="display: none;">
            <form class="form-horizontal" id="searchForm" action="/comment/findComment" method="post">
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="user-name" class="col-xs-3 control-label" >用户名：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="userName" id="user-name" placeholder="请输入用户名"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label for="user-comment" class="col-xs-3 control-label">评论内容：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="context" id="user-comment" placeholder="请输入评论内容"/>
                        </div>
                    </div>
                </div>
                <!-- <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label for="role-name" class="col-xs-3 control-label">状态：</label>
                        <div class="col-xs-8">
                            <select class="form-control" id="role-name" name="role-name" >
                                <option value="-1" >全部</option>
                                <option value="普通" >待审核</option>
                                <option value="管理员" >禁用</option>
                                <option value="管理员" >启用</option>
                            </select>
                        </div>
                    </div>
                </div> -->
                <div class="form-group">
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">开始日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="startDate" placeholder="请输入评论开始时间:2017-10-10"/>
                        </div>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="col-xs-3 control-label">结束日期：</label>
                        <div class="col-xs-8">
                            <input type="text" class="form-control" name="startDate" placeholder="请输入评论结束时间:2017-10-12"/>
                        </div>
                    </div>
                </div>

            </form>
        </div>

        <div class="show-list">
            <table class="table table-bordered table-hover" style='text-align: center;'>
                <thead>
                <tr class="text-danger">
                    <th class="text-center">编号</th>
                    <th class="text-center">评论内容</th>
                    <th class="text-center">用户名</th>
                    <th class="text-center">评论时间</th>
                    <th class="text-center">赞</th>
                    <th class="text-center">状态</th>
                    <th class="text-center">操作</th>
                </tr>
                </thead>
                <tbody id="tb">
                <tr th:each="comment:${commentPage.list}">
                    <td>[[${comment.id}]]</td>
                    <td>[[${comment.context}]]</td>
                    <td>[[${comment.userName}]]</td>
                    <td>[[${comment.createDate}]]</td>
                    <td>[[${comment.id}]]</td>
                    <td>
                        <span th:if="${comment.status ==0}">启用</span>
                        <span th:if="${comment.status ==1}">禁用</span>
                        <span th:if="${comment.status ==2}">待审核</span>
                    </td>
                    <td class="text-center">
                        <span th:if="${comment.status == 1}">
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${comment.id}" th:data-status="${comment.status -1}" value="启用"/>
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${comment.id}" th:data-status="${comment.status +1}" value="待审核"/>
                        </span>
                        <span th:if="${comment.status == 0}">
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${comment.id}" th:data-status="${comment.status +1}" value="禁用"/>
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${comment.id}" th:data-status="${comment.status +2}" value="待审核"/>
                        </span>
                        <span th:if="${comment.status == 2}">
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${comment.id}" th:data-status="${comment.status -1}" value="禁用"/>
                            <input type="button" class="btn btn-danger btn-sm" name="modifyStatus"
                                   th:data-id="${comment.id}" th:data-status="${comment.status -2}" value="启用"/>
                        </span>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div style="text-align: center;">
            <ul id="commentPageHelper"></ul>
        </div>

    </div>
</div>
</body>

</html>